<template>
    <div class="login">
        <div style="display:flex;background-color:white;width:50%;border-radius:5px;overflow:hidden; ">
            <div style="flex:1;">
                <img src="@/assets/login.png" alt="" style="width:100%;height:100%">
            </div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center ">
                <el-form :model="user" style="width:75%" :rules="rules" ref="loginRef">
                    <div style="font-size:23px;font-weight:bold;text-align:center;margin-bottom:25px;">欢迎登录书店综合平台</div>
                    <el-form-item prop="count">
                        <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.count" ></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码(初始密码:123)" v-model="user.pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div style="display:flex">
                            <el-input prefix-icon="el-icon-s-promotion" size="medium" placeholder="验证码" style="flex:1;" v-model="user.code"></el-input>
                            <div style="flex:1;height:36px">
                                <valid-code @update:value="getCode"/>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width:100%" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
                    </el-form-item>
                    <div style="display:flex;font-size:smaller;">
                        <div style="flex:1">还没有账号？请<span style="color: #1f26e6;cursor:pointer" @click="$router.push('/registry')">&nbsp;注册</span></div>
                        <div style="flex:1;text-align:right"><span style="color: #1f26e6;cursor:pointer" @click="handleForgetPass">忘记密码</span></div>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
            <el-form :model="forgetUserForm" label-width="80px" style="padding-right:20px;">
                <el-form-item label="账号" >
                    <el-input v-model="forgetUserForm.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="forgetUserForm.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="forgetPassDialogVis = false">取 消</el-button>
                <el-button type="primary" @click="resetPassword">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .login{
        width: 100%;
        min-width: 1240px;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        background: url("../assets/bg.jpg") no-repeat center center fixed;
        overflow:hidden;
    }
</style>

<script>

import ValidCode from "@/components/ValidCode.vue";
export default{
    name:'Login',
    components:{
        ValidCode
    },
    data(){

        //验证码校验
        const validateCode =(rule,value,callback)=>{
            if(value===''){
                callback(new Error('请输入验证码'))
            }else if(value.toLowerCase()!==this.code){
                callback(new Error('验证码错误'))
            }else{
                callback()
            }
        }

        return{
            forgetUserForm:{},//忘记密码的表单数据
            forgetPassDialogVis:false,
            code:'',//验证码组件传递过来的code
            user:{
                code:'',//表单用户输入的code
                count:'',
                pwd:'',
            },
            rules:{
                count: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { validator: validateCode, trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        handleForgetPass(){//初始化表单的数据
            this.forgetUserForm={}
            this.forgetPassDialogVis=true
        },
        resetPassword(){
            this.$request.put('/password',this.forgetUserForm).then(res=>{
                if(res.code==='200'){
                    this.$message.success('重置成功')
                    this.forgetPassDialogVis=false
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        getCode(code){
            this.code=code.toLowerCase()
        },
        login(){
            this.$refs['loginRef'].validate((valid) => {
                if (valid) {
                    this.$request.post('/login',this.user).then(res=>{
                        if(res.code==='200'){
                            this.$router.push('/')
                            this.$message.success('登录成功')
                            localStorage.setItem("honey-user",JSON.stringify(res.data))
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        }
    }
}

</script>